import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import "./index.css";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  const navigate=useNavigate()
  const render = async () => {
    const res = await axios.get("/api/cheng");

    if (res.data.code === 200) {
      setList(res.data.cheng[0].city); 
    }
  };
  useEffect(() => {
    render();
  }, []);
  const city=(v:any)=>{ 
    localStorage.setItem('citytwo',v)
    navigate(-1)
  }
  return (
    <div>
      <div>
        {list.map((item: any, index: number) => (
          <div key={index}>
            <div className="cc">{item.title}</div>
            <div>
              {item.lists.map((v: any, i: number) => (
                <div key={i} className="aa" onClick={()=>city(v)}>
                  <h4
                  >
                    {v}
                  </h4>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Index;
